<template>
  <div class="row">
    <div class="col-6">
      <table class="table table-sm">
        <caption>
          已可用
        </caption>
        <thead>
          <tr>
            <th>政策代码</th>
            <th>航司</th>
            <th>大客户代码</th>
            <th>舱位</th>
            <th>开始日期</th>
            <th>截至日期</th>
            <th>备注</th>
            <th>状态</th>
            <th>留扣</th>
            <th></th>
          </tr>
        </thead>
        <tr v-for="info of myPolicies">
          <td>{{ info.policyCode }}</td>
          <td>{{ info.carrier }}</td>
          <td>{{ info.keyCustomerCode }}</td>
          <td>{{ info.subclasses }}</td>
          <td>{{ info.effectDate }}</td>
          <td>{{ info.expireDate }}</td>
          <td>{{ info.publicMemo }}/{{ info.privateMemo }}</td>
          <td>{{ showStatus(info.status) }}</td>
          <td>{{ info.commissionRateRetained }}</td>
          <td>
            <button
              class="btn btn-sm btn-danger"
              @click.stop="deleteFlightDiscount(info.policyCode)"
            >
              删除
            </button>
          </td>
        </tr>
      </table>
    </div>
    <div class="col-6 m-0 p-0">
      <div class="card m-0 p-0">
        <div class="card-header bg-info text-white">可供选择政策</div>
        <div class="card-body">
          <form class="form-horizontal">
            <table class="table table-sm table-striped">
              <tr>
                <td></td>
                <td></td>
                <td><input type="input" size="6" v-model.trim="carrier0" /></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr v-for="info of allPolicies">
                <td>
                  <input
                    class="form-check-input"
                    type="radio"
                    :value="info.policyCode"
                    v-model="policyCode"
                  />
                </td>
                <td>{{ info.policyCode }}</td>
                <td>{{ info.carrier }}</td>
                <td>{{ info.keyCustomerCode }}</td>
                <td>{{ info.expireDate }}</td>
                <td>{{ info.publicMemo }}</td>
                <td>{{ showStatus(info.status) }}</td>
              </tr>
            </table>
            <div class="row">
              <label class="control-label text-end">留扣</label>
              <div>
                <input
                  type="input"
                  class="form-control"
                  v-model.number="commRateRetained"
                />
                <span class="small text-muted"
                  >实际结算价 = 私有运价底价 + 公布运价 * 留扣 * 1%。</span
                >
              </div>
            </div>
            <div class="row">
              <button
                id="btnChange"
                type="button"
                class="btn btn-primary  col-4 offset-4"
                @click.stop="saveCustomerFlightDiscount()"
              >
                保存
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchCustomerFlightDiscounts,
  saveCustomerFlightDiscount,
} from "@/api/customer.js";
import { searchKeyCustomerPolicies } from "@/api/basic-data.js";

import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";

export default {
  props: {
    customerId: {
      type: Number,
    },
  },
  components: {
    MyModalPrompt,
  },
  data() {
    return {
      modalTitle: "",
      saving: false,

      carrier0: "",
      allPolicies: [],

      myPolicies: [],
      policyCode: "",
      commRateRetained: 0,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  watch: {
    carrier0: function (newVal, oldVal) {
      console.log(newVal + "," + oldVal);
      if (newVal.length === 2) {
        this.searchFlightPolicies();
      }
    },
  },
  mounted: function () {
    this.search();
    this.searchFlightPolicies();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", { loadingText: msg });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    searchFlightPolicies: function () {
      const params = {
        "sc.carrier": this.carrier0.toUpperCase(),
      };
      searchKeyCustomerPolicies(params, (v) => {
        this.allPolicies = v.dataList;
      });
    },
    search: function () {
      searchCustomerFlightDiscounts(this.customerId, (v) => {
        this.myPolicies = v;
      });
    },
    saveCustomerFlightDiscount: function () {
      const params = {
        mode: 0,
        policyCode: this.policyCode,
        commissionRateRetained: this.commRateRetained,
      };
      saveCustomerFlightDiscount(this.customerId, params, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("保存成功");
          this.search();
        } else {
          this.showErrMsg("保存失败：" + v.errmsg, "danger");
        }
      });
    },
    deleteFlightDiscount: function (policyCode) {
      const params = {
        mode: 4,
        policyCode: policyCode,
      };
      saveCustomerFlightDiscount(this.customerId, params, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("操作成功");
          this.search();
        } else {
          this.showErrMsg("操作失败：" + v.errmsg, "danger");
        }
      });
    },
    showStatus: function (status) {
      if (status == 0) {
        return "停用";
      } else if (status === 1) {
        return "启用";
      }
    },
  },
};
</script>